<template>
    {{ obj.name }}
    <h1>{{ r1.name }}</h1>
    <h2>{{ r2.name }}</h2>
    <h1>{{ m1.obj2.name }}</h1>
    <button @click="change">更新数据</button>
</template>

<!-- setup作为语法糖使用 会自动return -->
<script lang="ts" setup>
import { reactive, ref } from 'vue';

    let obj = {
        name:"张三",
        age: 10
    }
    //ref
    let r1 = ref(obj)
    
    let r2 = reactive({
        name:"李四"
    })

    let change = () => {
        // console.log(r1)
        // // ref 修改或者获取的时候加上 .value
        // r1.value.name = "孙悟空"
        // console.log(r2)
        // // reactive定义的复杂数据类型，获取和修改 不需要加value
        // r2.name = "猪八戒"
        // m1.name = "猪八戒"
        m1.obj2 = {
            name: "哪吒"
        }
    }
    /* 
        ref和reactive区别

        ref用来处理基本数据类型 reactive处理复杂数据类型
        如果通过ref定义的复杂数据类型，内部会自动将相应式数据转换成reactive代理对象的形式

        ref定义的数据 需要value，reactive不需要
    */

//    reactive的bug
let obj2 = {
    name:"唐僧"
}
// 解决reactive再包裹一层对象
let m1 = reactive({
    obj2
})
</script>

<style lang="scss" scoped>

</style>